import { PageHeader, Button, Table, Tag, Pagination } from 'antd'
import React, { Component } from 'react'
import '../../../assets/css/user.css'
import url from '../../../config/url'
import req from '../../../http/req'
export default class Index extends Component {
  routes = [
    {
      path: '/dashboard/welcome',
      breadcrumbName: '控制台'
    },
    {
      path: '',
      breadcrumbName: '用户管理'
    },
    {
      path: '/dashboard/user/index',
      breadcrumbName: '用户列表'
    }
  ]
  // 表格定义数据
  columns = [
    {
      title: '序号',
      // 对应获取的数据源的字段名
      dataIndex: 'id',
      // 唯一key
      key: 'id',
      align: 'center'
    },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      align: 'center'
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      key: 'mobile',
      align: 'center',
      // 手机号前端脱敏
      render: (mobile) => mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      align: 'center',
      // 邮箱脱敏
      render: (email) => email.replace(/^(\w{1})\w{2}/, '$1***')
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
      align: 'center',
      render: (gender) => {
        switch (gender) {
          case '1':
            return <Tag color="blue">男</Tag>
          case '2':
            return <Tag color="pink">女</Tag>
          default:
            return <Tag color="yellow">保密</Tag>
        }
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      render: (status) => {
        return status === '2' ? (
          <Tag color="orangered">禁用</Tag>
        ) : (
          <Tag color="green">正常</Tag>
        )
      }
    },
    {
      title: '操作',
      align: 'center',
      render: () => (
        <div>
          <Button>编辑</Button>
          <Button>删除</Button>
        </div>
      )
    }
  ]
  state = {
    list: [],
    // 当前页面数
    page: 1,
    // 总数据量
    total: 0
  }
  componentDidMount() {
   this.loadData()
  }
  loadData = (page=1)=>{
    req.get(url.GetUserList,{params:{page}}).then((res) => {
      const { data, current_page, total } = res.data.paginate
      this.setState({ list: data, page: current_page, total: total })
    })
  }
  render() {
    return (
      <div>
        {/* 页头效果 */}
        <PageHeader
          className="site-page-header"
          onBack={() => this.props.history.push('/dashboard/welcome')}
          title="用户管理"
          subTitle="用户列表"
          extra={[
            <Button key={1} type="primary" size="large">
              添加用户
            </Button>
          ]}
          breadcrumb={{
            routes: this.routes
          }}
        />
        {/* 关于分页的实现方式: 
        前端[客户端]分页  接口返回全部数据  由前端页面通过JS进行数据分割,来实现分页
        100条   每页展示部分数据10条   数据切割  splice(从哪儿开始,截取几个)等
        // 每页条数
        let pageNum = 10 
        let start = 0
        第一页   splice(start,pageNum)  0,1,2,3,4,5,6,7,8,9
        第二页   spilice(start+pageNum-1,pageNum) 

        后端[服务端]分页  数据接口 分批返回部分数据  接收参数page第几页
            优势:每次加载一部分,速度更快 按需加载
        */}
        {/* rowKey 表格每行唯一key值  row形参代表每一行的数据 对象格式 */}
        {/* <Table rowKey={row=>row.id} pagination={{pageSize:2}} columns={this.columns} dataSource={this.state.list} /> */}
        <Table
          rowKey={(row) => row.id}
          columns={this.columns}
          dataSource={this.state.list}
          pagination={false}
        />
        <div style={{ textAlign: 'center', marginTop: '20px' }}>
          <Pagination
            current={this.state.page}
            total={this.state.total}
            onChange={(page) =>this.loadData(page)
            }
            showQuickJumper={true}
          />
        </div>
      </div>
    )
  }
}
